<template>
	<view class="content" v-if="pageShow">
		<!-- <u-swiper autoplay="true" interval="3000" height="981rpx" indicator="true" :list="list3" indicatorMode="line"
			circular></u-swiper> -->
		<view class="padding ffffff">
			<view class="flexbetween" style="position: relative;">
				<view class="flexleft">
					<view class="image_ya" style="margin-right: 20rpx;">
						<image :src="videoInfo.user.avatar" mode="widthFix"></image>
					</view>
					<view>
						<view class="text_g color_ling">{{videoInfo.user.nickname}}</view>
						<view class="year text_a  color_jiu">{{videoInfo.createtime_text}}</view>
					</view>
				</view>
				<view class="charge">
					{{videoInfo.is_free==0?"收费":"免费"}}
				</view>
			</view>
			<view class="videoName margin_top">
				{{videoInfo.title}}
			</view>
			<view class="margin_top2 text_w color_ling" style="font-weight: 400;">
				{{videoInfo.description}}
			</view>
			<!-- 视频 -->
			<view class="margin_top" v-show="isVideoShow">
				<!-- <cover-view class="margin_top videoCover"> -->
				<video id="myVideo" :src="videoInfo.video_link_text" :controls="controlsShow" @timeupdate="timeupdate"
					@play="videoPlay()"></video>
				<!-- </cover-view> -->
			</view>
			<!-- 代替video组件的背景 -->
			<view class="blackBg margin_top" v-show="!isVideoShow"></view>
			<view class="flexbetween margin_top" v-if="videoInfo.is_free==0">
				<view class="text_a color_san">
					<text>可试看{{videoInfo.free_seconds}}s/解锁需支付</text>
					<text class="color_red">￥{{videoInfo.price}}</text>
				</view>
				<view>
					<view class="text_a color_red" v-if="videoInfo.is_free==0">
						未解锁
					</view>
					<view class="text_a color_green" v-if="videoInfo.is_free==1">
						已解锁
					</view>
				</view>
			</view>
			<view class="flexright margin_top" @click="show=true" v-if="videoInfo.is_free==0">
				<view class="text_a color_red">点击解锁视频</view>
			</view>
		</view>
		<!-- <view class="nav">
			<view class="color_ling text_g">{{invitationInfo.title}}</view>
			<view class="text_b color_jiu margin_top">{{invitationInfo.createtime_text}}</view>
			<view class="title  margin_top" style=" letter-spacing: 5rpx;">
				{{invitationInfo.content}}<text style="color: rgba(212, 139, 57, 1);">#{{invitationInfo.bq}}</text>
			</view>
		</view> -->
		<!-- 评论 -->
		<!-- <view class="section">
			<template>
				<view class="comment">评论 (45646)</view>
				<view class="flexstart aside" style="padding: 30rpx 0;" @click="plTr(item)">
					<view style="margin-right: 20rpx;">
						<view class="image_ya">
							<image src="/static/image/home/zhuan.png" mode="widthFix"></image>
						</view>
					</view>
					<view>
						<view class="text_g color_ling">Livers</view>
						<view class="pinglunqu  text_f color_san">评论区也是醉了，只要没做伤天害理得事情为啥要臆测别人素人呢？</view>
						<view class="year text_a  color_jiu">2023-02-04 12:20:30</view>
						<view class="flexstart aside" style="border-bottom: none;padding: 30rpx 0;">
							<view style="margin-right: 20rpx;">
								<view class="image_ya">
									<image src="/static/image/home/zhuan.png" mode="widthFix"></image>
								</view>
							</view>
							<view>
								<view class="text_g color_ling">悠然见那涣</view>
								<view class="pinglunqu  text_f color_san">评论区也是醉了，只要没做伤天害理得事情为啥要臆测别人素人呢？</view>
								<view class="year text_a  color_jiu">2023-02-04 12:20:30</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view> -->
		<!-- footer -->
		<view class="footer flexbetween">
			<view class="flexbetween">
				<view class="flexcolumn margin_right1" @click.stop="goShare(videoInfo)">
					<!-- <button open-type="share" class="footer_stars"> -->
					<!-- <view class="share" style="margin-top: 14rpx;">分享</view> -->
					<image class="imgForward" src="/static/image/home/forward_black.png" mode="widthFix"></image>
					<view class="share" style="margin-top: 18rpx;">转发</view>
					<!-- </button> -->
				</view>
				<view class="flexcolumn praise margin_right1" style="position: relative;">
					<!-- 未点赞 -->
					<image class="imgLike" src="/static/image/home/like_black.png" mode="" v-show="!videoInfo.is_like"
						@click="like"></image>
					<!-- 已点赞 -->
					<image class="imgLike" src="/static/image/home/like-fill.png" mode="" v-show="videoInfo.is_like"
						@click="like"></image>
					<view class="zan_num">{{videoInfo.like_num}}</view>
					<view class="share" style="margin-top: 15rpx;">{{videoInfo.is_like?'已点赞':'点赞'}}</view>
				</view>
				<view class="flexcolumn praise" style="position: relative;">
					<!-- 未收藏 -->
					<image class="imgStar" src="/static/image/home/star_black.png" mode=""
						v-show="!videoInfo.is_collect" @click="collect"></image>
					<!-- 已收藏 -->
					<image class="imgStar" src="/static/image/home/star-fill.png" mode="" v-show="videoInfo.is_collect"
						@click="collect"></image>
					<view class="zan_num">{{videoInfo.collect_num}}</view>
					<view class="share" style="margin-top: 11rpx;">{{videoInfo.is_collect?'已收藏':'收藏'}}</view>
				</view>
			</view>
			<!-- <view class="sousuobox flexleft" v-if="type==2">
				<input :focus="tipFocus" class="inputs" type="text" placeholder="说点什么吧"
					placeholder-class="color: rgba(197, 197, 197, 1);" v-model="content"
					@blur="setHfMsg(hfMsg.pid,hfMsg.reple_user_id)" @confirm="sendComm">
				<view class="margin_right2 send" @click="sendComm">发送</view>
			</view> -->
		</view>
		<!-- 支付弹窗 -->
		<u-modal :show="show" :title="title" showCancelButton confirmColor="#F3271C" @cancel="cancel"
			@confirm="confirmPayment()">
			<view class="slot-content text">
				<view class="text_a color_six">试看已结束</view>
				<view class="text_a margin_top2">
					<text class="color_six">支付</text>
					<text class="color_red">￥{{videoInfo.price}}</text>
					<text class="color_six">畅享完整版！</text>
				</view>
			</view>
		</u-modal>
		<u-popup :show="shareShow" round="20" mode="center" @close="shareShow=false">
			<view class="popupBoxShare">
				<view class="flexbetween">
					<view class="text margin_right7" @click="wxShareFriends">
						<image class="imgBox" src="/static/image/home/weixin.png" mode="widthFix"></image>
						<view class="text_b color_ling margin_top2">微信好友</view>
					</view>
					<view class="text">
						<image class="imgBox" src="/static/image/home/QQ.png" mode="" @click="qqShareFriends">
						</image>
						<view class="text_b color_ling margin_top2">QQ好友</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				title: "温馨提示",
				tipFocus: false,
				list3: [],
				page: 1,
				limit: 12,
				controlsShow: true, //是否显示播放按钮
				videoId: "", //视频id
				videoInfo: {
					user: {
						avatar: ""
					}
				}, //视频详情
				videoContext: null, //视频实例
				invitationCommList: { //评论列表
					data: []
				},
				content: "", //评论内容`
				hfMsg: {
					invitation_comment_id: "",
					reple_user_id: ""
				},
				pageShow: false,
				currentTime: 0, //当前视频播放的起始时间
				isVideoShow: true,
				shareShow:false,
				shareInfo: {}, //分享信息
				forumType:0,//类型
			}
		},
		onLoad(options) {
			this.videoId = options.id
			// this.getInvitationCommList()
		},
		onShow() {
			this.getVideoInfo()
		},
		watch: {
			show(newVal) {
				this.isVideoShow = newVal ? false : true
			},
			shareShow(newVal) {
				this.isVideoShow = newVal ? false : true
			}
		},
		methods: {
			timeupdate(e) {
				this.currentTime = Math.floor(e.detail.currentTime)
				if (this.videoInfo.is_free == 0 && (Math.floor(e.detail.currentTime) >= this.videoInfo.free_seconds)) {
					// this.videoContext.seek(this.videoInfo.free_seconds); //跳转到指定位置
					this.videoContext.pause(); //暂停
					this.show = true
					this.controlsShow = false
					// this.videoContext.play();  //播放
				}
			},
			videoPlay() { //视频播放
				if (this.videoInfo.is_free == 1) {
					return false
				}
				if (this.currentTime >= this.videoInfo.free_seconds) {
					this.videoContext.pause(); //暂停
					this.show = true
				}
			},
			cancel() {
				this.show = false
			},
			confirmPayment() { //确认支付
				uni.navigateTo({
					url: "/pages_index/payment?msg5=" + encodeURIComponent(JSON.stringify(this.videoInfo))
				})
				this.show = false
			},
			getVideoInfo() { //视频详情
				let _this = this
				httpRequest.request('/api/community/getdetail', 'GET', {
					id: _this.videoId,
				}).then(res => {
					if (res.code == 1) {
						this.videoInfo = res.data
						this.videoContext = uni.createVideoContext('myVideo')
						this.pageShow = true
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getInvitationCommList(isPage, page) { //评论列表
				let _this = this
				httpRequest.request('/api/Invitation/commentList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					id: _this.videoId,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.invitationCommList;
						if (isPage == true) {
							_this.invitationCommList.data = dataList.data.concat(resList.data);
						} else {
							this.invitationCommList = res.data
							_this.invitationCommList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onShareAppMessage() {
				return {
					title: this.videoInfo.title,
					path: "pages_post/tiezixq?id=" + this.videoId + "&rec_uid=" + uni.getStorageSync(
						"user_id"),
				}
			},
			// onReachBottom() {
			// 	let _this = this;
			// 	let list = _this.invitationCommList;
			// 	let page = _this.page;
			// 	if (list.last_page <= page) {
			// 		return false;
			// 	}
			// 	page++;
			// 	_this.page = page;
			// 	_this.getInvitationCommList(true, page);
			// },
			like() { //点赞、取消点赞
				let _this = this
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				httpRequest.request('/api/community/likes', 'GET', {
					community_id: _this.videoInfo.id,
				}).then(res => {
					if (res.code == 1) {
						this.getVideoInfo()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			collect() { //收藏、取消收藏
				let _this = this
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				httpRequest.request('/api/community/collects', 'GET', {
					community_id: _this.videoInfo.id,
				}).then(res => {
					if (res.code == 1) {
						this.getVideoInfo()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 评论他人
			plTr(item) {
				this.setHfMsg(item.id, item.user_id)
				this.tipFocus = true
			},
			setHfMsg(val1, val2) {
				this.hfMsg = {
					invitation_comment_id: val1,
					reple_user_id: val2
				}
				if (val1 == "") {
					this.tipFocus = false
				}
				console.log(this.hfMsg, "999");
			},
			sendComm() { //评论
				let _this = this
				this.tipFocus = false
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				if (_this.content == "") {
					return false
				}

				httpRequest.request('/api/user/commentInvitation', 'GET', {
					invitation_id: _this.videoInfo.id,
					content: _this.content,
					invitation_comment_id: this.hfMsg.invitation_comment_id,
					reple_user_id: this.hfMsg.reple_user_id
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						_this.content = ""
						this.getInvitationCommList()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
				this.setHfMsg("", "")
			},
			goShare(item) { //转发
				this.shareShow = true
				this.shareInfo = item
			},
			addShare(community_id) { //增加转发量
				console.log("调用了！！！")
				let _this = this;
				httpRequest.request('/api/community/shares', 'POST', {
					community_id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						httpRequest.toast("分享成功！");
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			wxShareFriends() { //微信分享
				let _this = this
				let shareInfo = _this.shareInfo
				uni.share({
					provider: "weixin",
					type: 0,
					title: shareInfo.title || "",
					href: `https://hongniaotianxuan.com/h5/#/?id=${shareInfo.id}`,
					scene: "WXSceneSession",
					summary: shareInfo.description || "",
					imageUrl: "https://hongnwh-1318979827.cos.ap-shanghai.myqcloud.com/uploads/20230803/49aef582328737659ba0ef126c7de37a.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						_this.addShare(shareInfo.id)
						_this.shareShow = false
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			qqShareFriends() { //QQ分享
				let _this = this
				let shareInfo = _this.shareInfo
				let url = `https://hongniaotianxuan.com/h5/#/?id=${shareInfo.id}`
				uni.share({
					provider: "qq",
					type: 1,
					title: shareInfo.title || "",
					href: url,
					summary: shareInfo.description || "",
					// imageUrl:"www.wanxiangshide.xyz/uploads/20230722/68c2959eb3a63faff5248380f80bc5c1.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						_this.addShare(shareInfo.id)
						_this.shareShow = false
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #FAFAFA;
		padding-top: 30rpx;
	}
	video{
		height: 415rpx;
	}
	::v-deep.u-modal__title {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.blackBg {
		height: 415rpx;
		background-color: #000;
	}

	::v-deep.u-popup__content {
		z-index: 999999 !important;
	}

	button::after {
		border: none;
	}

	button {
		padding: 0;
		border-radius: 0;
		background-color: #fff;
		line-height: 40rpx;
	}

	.imgForward {
		width: 26rpx;
		height: 26rpx;
		display: block;
	}

	.imgLike {
		width: 35rpx;
		height: 35rpx;
		display: block;
	}

	.imgStar {
		width: 38.88rpx;
		height: 38.88rpx;
		display: block;
	}

	.footer_stars {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

	}

	.zan_num {
		position: absolute;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #D48B39;
		bottom: 72rpx;
		left: 50rpx;
	}

	.praise {
		margin-left: 50rpx;
	}

	.share {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.send {
		width: 20%;
		padding: 15rpx 23rpx;
		text-align: center;
		background: rgba(243, 39, 28, 1);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin: 0rpx;
	}

	.sousuobox {
		// width: 65%;
		background: #F3F3F3;
		padding: 8rpx 0 8rpx 30rpx;
		border-radius: 60rpx;
		margin-left: 30rpx;
	}

	.footer {
		position: fixed;
		bottom: 0rpx;
		background-color: #ffff;
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.aside {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid RGBA(232, 232, 232, 1);
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.comment {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.ya {
		padding: 34rpx 19rpx 0rpx 30rpx;
	}

	.pinglunqu {
		padding-top: 5rpx;
	}

	.year {
		padding-top: 17rpx;
	}

	.section {
		background-color: #fff;
		padding: 38rpx 30rpx 250rpx 30rpx;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nav {
		padding: 45rpx 30rpx 23rpx 30rpx;
		border-bottom: 1rpx solid RGBA(232, 232, 232, 1);
	}

	.charge {
		position: absolute;
		right: 0;
		top: 20rpx;
		background-color: rgba(255, 122, 0, .1);
		padding: 5rpx 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF7A00;
	}

	.videoName {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		// margin-bottom: 30rpx;
	}

	video {
		width: 100%;
	}
	
	.popupBoxShare {
		padding: 100rpx 100rpx;
	
		.title {
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			text-align: center;
		}
	
		.imgBox {
			width: 112rpx;
			height: 112rpx;
		}
	}
</style>